<template>
  <div class="recommend">
    <div class="top">
      <div class="top-left">
        <span>{{ title }}</span>
        <span>{{ subTitle }}</span>
      </div>
      <div class="top-right">
        <slot name="top-right"></slot>
      </div>
    </div>
    <div class="bottom">
      <slot></slot>
    </div>
  </div>
</template>

<script lang="ts"
        setup>
defineProps<{
  title: string,
  subTitle?: string
}>()
</script>

<style lang="less"
       scoped>
.recommend {
  background-color: #fff;
  margin: 20px 0;

  .top {
    display: flex;
    align-items: center;
    position: relative;

    .top-left {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 120px;
      font-size: 28px;
      color: #666666;

      span:nth-of-type(1) {
        font-size: 28px;
        color: #666666;
        line-height: 60px;
      }

      span:nth-of-type(2) {
        font-size: 20px;
        color: #999999;
      }
    }

    .top-right {
      right: 0;
      top: 50%;
      position: absolute;
      min-width: 100px;
    }
  }

  .bottom {
    display: flex;
    align-items: center;
    padding: 0 65px 30px;
  }
}
</style>